iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 8
2
Modern Web

TypeScript + React + 雜七雜八系列 第 8

【Day 08】React UI Components Library 「Material-UI」

  • 分享至 

  • xImage
  •  

大家好,今天的篇章要介紹的是 Material-UI

會延續前一天的專案結構接續下去進行修改,如果沒有參與到昨天的建置過程,這邊也有提供原始碼
https://github.com/littlehorseboy/typescript-react/tree/day07-useref-usememo-usecallback


Material-UI

Material UI 呈現 Google's Material Design 的 React Component 集,這邊就直接安裝下來展示一段使用方式

npm i @material-ui/core
+ src/components/day08/MaterialContainer/MaterialContainer.tsx

執行結果

使用起來就是這麼的輕鬆寫意,隨選隨用,就能擁有 Material Design 風格的按鈕,接下來在講幾個筆者覺得也蠻不錯的功能。

CssBaseline

Material UI 提供了一種 normalize.css 的 component 引用方式,也就是 CssBaseline,通常筆者都會將它使用在最根部的 component 上。

src/Root.tsx

畫面就會有 normalize.css 設定

createMuiTheme

一次修改所有 Material UI component 的 css 樣式

src/Root.tsx

利用 createMuiTheme 定義 theme,塞給 MuiThemeProvider,不用一定要設在 Root 也可以。

palette 就是所有使用 color="primary"color="secondary" 的 component 都會變更顏色,typography 則是 component 內的所有文字。

呈現

以上為筆者常用的全局設定,後續還會陸續用到並介紹不同的 Material UI component。


最後附上原始碼
https://github.com/littlehorseboy/typescript-react/tree/day08-material-ui


明天會介紹 JSS,一個 CSS in JS 的函式庫


上一篇
【Day 07】React Hooks,useRef 與 useMemo 與 useCallback
下一篇
【Day 09】JSS
系列文
TypeScript + React + 雜七雜八30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言